<template>
  <div class="wrap">
		<div class="bottom">
			<div @click="goLink(item)" class="bottom-child" :class="[link == item.path?current: '']" v-for="(item, index) in menu" :key="index">
				<div class="bottom-icon">
					<i class="iconfont" :class="item.icon"></i>
				</div>
				<p>{{item.title}}</p>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
			link: '',
			menu: [
				{
					path: 'forum',
					icon: 'icon-shouye',
					title: '留言列表'
				},
				{
					path: 'setforum',
					icon: 'icon-pan_icon',
					title: '发表留言'
				}
			],
			current: 'cur'
    }
  },
  methods: {
		goLink: function (item) {
			this.$router.push({ name: item.path })
		}
  },
	mounted () {
		this.link = this.$route.path.split('/')[2]
	}
}
</script>

<style>
	.bottom{
		width: 100%;
		height: 104px;
		border-top: #dbdbdb solid 1px;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		background: #fff;
	}
	.bottom-child{
		text-align: center;
		width: 50%;
		float: left;
		color: #646464;
	}
	.bottom-child.cur{
		color: #0391FF;
	}
	.bottom-icon{
		margin-top: 20px;
	}
	.bottom-icon>i{
		font-size: 34px;
	}
	.bottom-child>p{
		margin-top: 14px;
		font-size: 22px;
	}
</style>
